<template>
  <div class="box">
    <!-- 头部区域 -->
    <div class="boxtop">
      <van-nav-bar  title="检测报告"  left-arrow @click-left='clickLeft'>
      </van-nav-bar>
    </div>
    <!-- 这叠面板 -->
    <van-collapse v-model="activeNames">
      <!-- 车辆信息 -->
      <van-collapse-item title="车辆信息" name="1">
        <!-- 中间的表单内容 -->
        <van-cell-group>
          <van-field v-model="FormInfo.value" label="车型" placeholder="请输入用户名" />
          <van-field v-model="FormInfo.value" label="VIN" placeholder="请输入用户名" />
          <van-field v-model="FormInfo.value" label="上牌日期" placeholder="请输入用户名" />
          <van-field v-model="FormInfo.value" label="表显里程" placeholder="请输入用户名" />
          <van-field v-model="FormInfo.value" label="颜色" placeholder="请输入用户名" />
          <van-field v-model="FormInfo.value" label="过户" placeholder="请输入用户名" />
          <van-field v-model="FormInfo.value" label="使用性质" placeholder="请输入用户名" />
        </van-cell-group>
      </van-collapse-item>
      <div class="KongGe"></div>
      <!-- 安全部件 -->
      <van-collapse-item name="2">
        <template #title>
          <div>安全部件 <van-icon name="question-o" color="#df0012" /></div>
        </template>
        <!-- 车框的图片 -->
        <div class="carPicture">
          <div class="picture">车的图片</div>
        </div>
        <!-- <van-cell-group>
          <van-cell title="车顶" value="正常" />
          <van-cell title="发动机舱防火墙" value="正常"/>
          <van-cell title="左A柱" value="正常"/>
          <van-cell title="右前纵梁" value="正常"/>
          <van-cell title="外观部件" value="正常"/>
          <van-cell title="性能部件" value="正常"/>
          <van-cell title="仪器检测" value="正常"/>
        </van-cell-group> -->
        <div class="carModel">
          <span class="carModelFrist">车顶</span>
          <div :class="this.color==='1'?'carModelsecond':'aaa'">{{this.color==='1'?'正常':'异常'}}</div>
        </div>
        <van-divider />
        <div class="carModel">
          <span class="carModelFrist">发动机舱防火墙</span>
          <div class="carModelsecond">正常</div>
        </div>
        <van-divider />
        <div class="carModel">
          <span class="carModelFrist">左A柱</span>
          <div class="carModelsecond">正常</div>
        </div>
        <van-divider />
        <div class="carModel">
          <span class="carModelFrist">右前纵梁</span>
          <div class="carModelsecond">正常</div>
        </div>
        <van-divider />
         <div class="carModel">
          <span class="carModelFrist">性能部件</span>
          <div class="carModelsecond">正常</div>
        </div>
        <van-divider />
      </van-collapse-item>
      <div class="KongGe"></div>
      <!-- 车况描述 -->
      <van-collapse-item title="车况表述" name="3">
        <!-- 车况的输入框 -->
        <div class="inputAll">
          <!-- 安全部件 -->
          <div class="saftbujian">安全部件</div>
          <!-- 输入框 -->
          <div class="inputText">
            <van-field
              v-model="inputinformation"
              rows="2"
              autosize
              type="textarea"
              placeholder="请输入文字"
            />
          </div>
          <!-- 性能部件 -->
           <div class="saftbujian">性能部件</div>
          <!-- 输入框 -->
          <div class="inputText">
            <van-field
              v-model="inputinformation"
              rows="2"
              autosize
              type="textarea"
              placeholder="请输入文字"
            />
          </div>
            <!-- 外观部件 -->
           <div class="saftbujian">外观部件</div>
          <!-- 输入框 -->
          <div class="inputText">
            <van-field
              v-model="inputinformation"
              rows="2"
              autosize
              type="textarea"
              placeholder="请输入文字"
            />
          </div>
        </div>
      </van-collapse-item>
      <div class="KongGe"></div>
      <!-- 车况描述 -->
      <van-collapse-item title="车况描述" name="4">
        <div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <div class="cardu">车前45度</div>
              <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
             <van-grid-item>
              <div class="cardu">轮廓</div>
             <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
             <van-grid-item>
              <div class="cardu">驾驶位左侧</div>
              <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
          </van-grid>
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <div class="cardu">后备箱整体</div>
              <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
             <van-grid-item>
              <div class="cardu">右后45度</div>
             <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
             <van-grid-item>
              <div class="cardu">后排座右座</div>
              <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
          </van-grid>
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <div class="cardu">副驾驶右侧</div>
              <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
             <van-grid-item>
              <div class="cardu">发动机整体</div>
             <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
             <van-grid-item>
              <div class="cardu">中控与方向盘</div>
              <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
          </van-grid>
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <div class="cardu">表显里程</div>
              <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
             <van-grid-item>
              <div class="cardu">行驶证</div>
             <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item>
             <!-- <van-grid-item>
              <div class="cardu">中控与方向盘</div>
              <div class="pictureaa">
                <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
              </div>
            </van-grid-item> -->
          </van-grid>
        </div>
      </van-collapse-item>
    </van-collapse>
    <!-- 返回的按钮 -->
    <div class="bottomButton">
      <div class="button" @click="buttonClick">
        <span class="back">返回</span>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data () {
    return {
      activeNames: ['1'],
      // 表单的内容
      FormInfo: {
        value: ''
      },
      color: '0',
      // 输入框的信息
      inputinformation: ''
    }
  },
  methods: {
    // 点击左侧的箭头
    clickLeft () {
      this.$router.back()
    },
    buttonClick () {
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
// 返回的按钮
.bottomButton{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-color: #f6f6f9;
  .button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 343px;
    height: 38px;
    background-color: #4397d4;
    border-radius: 19px;
    .back{
      display: inline;
      color: #ffff;
      font-size:.426667rem;
    }
  }
}
// 图片上面的文字
.cardu{
  margin-bottom: 10px;
}
// 图片区域
.pictureaa{
width: 82px;
height: 82px;
background: #FFFFFF;
border-radius: 6px;
border: 1px solid #DDDDDD;
}
.inputAll{
.saftbujian{
  font-size: 14px;
  color: #000;
}
.inputText{
  margin-top: 10px;
  width: 343px;
  height: 70px;
  border: 1px solid #E5E5E5;
}
}

.carModel{
  position: relative;
  display: flex;
  // justify-content: start;
  // align-items: center;
  margin-top: 10px;
  // background-color: pink;
  .carModelFrist{
    display: inline;
    font-size: 14px;
    color: #323233;
  }
  .carModelsecond{
    position: absolute;
    right: 0;
    top: 0;
  }
  .aaa{
     position: absolute;
    right: 0;
    top: 0;
    color:red;
  }
}
.carPicture{
  .picture{
  width: 355px;
  height: 238px;
  background-color: pink;
  }
}
.KongGe{
  height: 10px;
  background-color: #f6f6f9;
}
</style>
